<!-- 父级页面:控制处登录页以外的所有页面共有的头部与左侧菜单栏 -->
<template>
  <div style="display: flex; flex-direction: column;">
    <!-- 顶部导航栏 -->
    <el-header style="background-color: #3c82f5; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between;">
      <!-- 菜单部分 -->
      <el-menu
          :default-active="route.path"
          mode="horizontal"
          background-color="#3c82f5"
          text-color="#fff"
          active-text-color="#ff0"
          router
          style="flex-grow: 1; display: flex; justify-content: space-around;"
      >
        <el-menu-item index="/workbench">
          <el-icon><HomeFilled /></el-icon>
          <span>工作台</span>
        </el-menu-item>
        <el-menu-item index="/processCenter">
          <el-icon><Setting /></el-icon>
          <span>流程中心</span>
        </el-menu-item>
        <el-menu-item index="/calendar">
          <el-icon><Calendar /></el-icon>
          <span>日历</span>
        </el-menu-item>
        <el-sub-menu index="personnel">
          <template #title>
            <el-icon><Coin /></el-icon>
            <span>人员管理</span>
          </template>
          <el-menu-item index="/entry">入职</el-menu-item>
          <el-menu-item index="/regular">转正</el-menu-item>
          <el-menu-item index="/department">调岗</el-menu-item>
          <el-menu-item index="/resignation">离职</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/meeting">
          <el-icon><OfficeBuilding /></el-icon>
          <span>行政管理</span>
        </el-menu-item>




        <el-sub-menu index="fiance">
          <template #title>
            <el-icon><Coin /></el-icon>
            <span>财务管理</span>
          </template>
            <el-menu-item index="/reimbursementApplication">报销申请</el-menu-item>
            <el-menu-item index="/paymentApplication">付款申请</el-menu-item>
            <el-menu-item index="/invoice">开票记录</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="dict">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>数据字典</span>
          </template>
          <el-menu-item index="/dict">字典管理</el-menu-item>
        </el-sub-menu>



      </el-menu>
      <!-- 用户下拉菜单 -->
      <el-dropdown>
        <span style="color: white; cursor: pointer;">
          {{ user.username }}
          <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <!-- 面包屑导航 -->
    <div style="background-color: #f5f5f5; padding: 10px 20px; border-bottom: 1px solid #e5e5e5;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="item in breadcrumb" :key="item">{{ item }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主内容区域 -->
    <el-main style="height: calc(100vh - 100px); padding: 20px; overflow-y: auto;">
      <router-view />
    </el-main>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { HomeFilled, Document, Setting, Calendar, User, OfficeBuilding, Coin, ArrowDown } from '@element-plus/icons-vue';

// 控制菜单折叠状态（这里暂时未使用折叠功能，可根据需求扩展）
const isCollapse = ref(false);
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

// 获取用户信息
const user = ref(getUser());
const logOut = () => {
  localStorage.removeItem("user");
  user.value = '';
  window.location.href = '/login';
};

// 路由相关
const router = useRouter();
const breadcrumb = ref([]);
const map = {
  '/workbench': ['工作台'],
  '/dict': ['数据字典', '字典管理'],
  '/dictOption': ['数据字典', '字典选项管理'],
  '/processCenter': ['流程中心'],
  '/calendar': ['日历'],
  '/entry': ['人员管理','入职'],
  '/regular': ['人员管理','转正'],
  '/department': ['人员管理','调岗'],
  '/resignation': ['人员管理','离职'],
  '/administration': ['行政管理'],
  '/expense': ['财务管理', '报销管理'],
  '/purchase': ['财务管理', '采购管理'],
  '/purchaseAdd': ['财务管理', '采购申请'],
  '/finance': ['财务管理']

};
const route = useRoute();

// 更新面包屑导航
const updateBreadcrumb = (route) => {
  const path = route.path;
  breadcrumb.value = map[path];
};

// 页面挂载时更新面包屑导航
onMounted(() => {
  updateBreadcrumb(route);
});

// 路由导航守卫，在路由切换前更新面包屑导航
router.beforeEach((to, from, next) => {
  updateBreadcrumb(to);
  next();
});

// 从 localStorage 中获取用户信息
function getUser() {
  const userStr = localStorage.getItem("user");
  return userStr ? JSON.parse(userStr) : {};
}
</script>

<style scoped>
/* 菜单样式调整 */
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #ff0;
}

/* 下拉菜单样式调整 */
.el-dropdown-menu__item {
  padding: 8px 20px;
}

/* 去除菜单默认的内边距 */
.el-menu--horizontal {
  padding: 0;
}
</style>